<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏</title>
    <style>

        #mycanvas{
            background-color: #ADAD98;
            border: 5px solid saddlebrown;
        }
        button{
            padding: 2px;
            margin-left:100px;
            cursor: pointer;;

        }
        .box{
            width: 50%;
            margin: auto;
        }
        body{
            width: 100%;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="box">
    <div  class="canvas-box">
        <canvas id="mycanvas" width="700" height="500"></canvas>
    </div>
    <button onclick="move(this)" style="background-color: #ADAD98">开始</button>
    <button class="but" id="red_color" style="background-color: red">红色</button>
    <button class="but" id="blue_color" style="background-color: blue;color: #fff">蓝色</button>
    <button class="but" id="yellow_color" style="background-color: yellow">黄色</button>
</div>


<script>


    var c = document.getElementById("mycanvas");

    var ctx = c.getContext("2d");
    var colorarry = ["red","blue","yellow"];
    var set;
    var rightwz =600;
    ctx.fillStyle  ="red";

    ctx.font="50px,Arial";
    ctx.fillStyle="red";
    ctx.fillText("是勇士就玩一分钟！",300,200);


            function move(but) {
                but.style.visibility="hidden";
                var ys = 0;
                var sudu = 30;
                var clicka = false;
                set = setInterval(function () {
                    ctx.clearRect(0, 0, 700, 500);
                    if (rightwz <= -50) {
                        if(clicka){
                            ys = Math.floor(Math.random() * 3);
                            ctx.fillStyle = colorarry[ys];
                            rightwz = 600;
                            clicka = false;
                        }else{
                            alert("游戏结束，刷新继续！"+"连击次数："+lj);
                            ctx.font="bolder 50px,Arial";
                            ctx.fillStyle="red";
                            ctx.fillText("刷新继续！",300,200);
                            lj=0;
                            clearInterval(set);
                            sudu = 30;
                        }
                    }
                        ctx.beginPath();
                        ctx.rect(rightwz, 0, 50, 30);
                        ctx.fill();
                        rightwz -= sudu;

                    //console.log(rightwz);
                }, 100);


//点击红蓝黄

                var lj=0;
                $("#red_color").click(function(){
                    clicka = true;

                   if (ys==0) {
                       lj++;
                        sudu+=3;
                        console.log("红色的");
                    } else {
                        sudu=30;
                       alert("游戏结束，刷新继续！"+"连击次数："+lj);
                       clearInterval(set);
                       ctx.font="50px,Arial";
                       ctx.fillStyle="red";
                       ctx.fillText("刷新继续！",300,200);
                       lj=0;
                    }
                });
                $("#yellow_color").click(function(){
                    clicka = true;
                    if (ys==2) {
                        lj++;
                        sudu+=3;
                        console.log("黄色的");
                    } else {
                        sudu=30;
                        alert("游戏结束，刷新继续！"+"连击次数："+lj);
                        clearInterval(set);
                        ctx.font="50px,Arial";
                        ctx.fillStyle="red";
                        ctx.fillText("刷新继续！",300,200);
                        lj=0;
                    }
                });
                $("#blue_color").click(function(){
                    clicka = true;
                    if (ys==1) {
                        lj++;
                        sudu+=3;
                        console.log("蓝色的");
                    } else {
                        sudu=30;
                        alert("游戏结束，刷新继续！"+"连击次数："+lj);
                        clearInterval(set);
                        ctx.font="50px,Arial";
                        ctx.fillStyle="red";
                        ctx.fillText("刷新继续！",300,200);
                        lj=0;
                    }
                });
            }










</script>


</body>
</html>